<template>
    <!--  确认订单页面  -->
    <div>
        <!--导航栏-->
        <div style="position: fixed;z-index: 10;width: 100%">
            <van-nav-bar  :title="title" left-text="" :left-arrow="leftArrow" @click-left="onClickLeft()">
                <template #right>
                    <van-icon name="search" size="18" />
                </template>
            </van-nav-bar>
        </div>
        <div style="height: 50px"></div>



        <!--单元格 地址信息-->
        <div style="margin-left: 20px;color:deepskyblue">地址信息:</div>
        <div style="margin: 0 0 10px 20px" @click="onAddress" v-if="isChooseAddress">
            请选择收货地址
        </div>
        <div style="margin: 0 0 10px 20px" @click="onAddress" v-else>
            <div>name:{{address.name}}</div>
            <div>tel:{{address.tel}}</div>
            <div>address:{{address.address}}</div>
        </div>
<!--        <van-contact-card-->
<!--                type="edit"-->
<!--                :name="address.name"-->
<!--                :tel="address.tel"-->
<!--                :add-text="address.address"-->
<!--                @click="onAddress"-->
<!--        />-->
<!--        <van-cell-group>-->
<!--            <van-cell :title="address.address" :value="技工校区" :label="广州商学院" @click="onAddress" />-->
<!--        </van-cell-group>-->

        <!--分割线-->
        <van-divider />

        <!--店家卡片-->
        <div style="margin-left: 20px;color:deepskyblue">店面信息:</div>
        <van-card :title="store.name"
                  :thumb="store.pic"
                  :desc="store.detail"
        >
            <template #price-top>
                销量：{{ store.sell }}
            </template>
        </van-card>

        <!--分割线-->
        <van-divider />

        <!--菜样-->
        <div style="margin-left:20px;color:deepskyblue">已选择菜样:</div>
        <div v-for="(food,index) in cFoods">
            <van-card :title="food.name"
                      :thumb="food.pic"
                      :desc="food.detail"
                      :price="food.price"
                      :num="food.num"
            >
            </van-card>
        </div>





        <!--交易成功 弹窗-->
        <van-dialog v-model="show" title="交易成功" @confirm="confirm">
            <img src="https://gitee.com/dhymon/figurebed/raw/master/img/交易成功订单-icon.png" width="200px" height="200px"/>
        </van-dialog>

        <!--底部 提交订单-->
        <van-submit-bar :price=totalPrice button-text="提交订单" @submit="onSubmit" />
    </div>
</template>

<script>
    import { Dialog } from 'vant';
    import { Toast } from 'vant';
    export default {
        name: "Order",
        components: {
            [Dialog.Component.name]: Dialog.Component,
        },
        data(){
            return {
                leftArrow: true,
                title: '确认订单',
                // price: 3500,
                show: false,

                chosenContactId: null,
                editingContact: {},
                showList: false,
                showEdit: false,
                isEdit: false,
                list: [

                ],
                store: {},
                cFoods:[],// id,name,num,price,pic
                address:{}//id,name,tel,buyerId,address
            }
        },
        computed: {
            isChooseAddress(){
                for(let i in this.address){
                    return false;
                }
                return true;
            },
            totalPrice(){
                let p = 0;
                for (let f of this.cFoods) {
                    p += f.price
                }
                return p*100;
            }
        },
        methods:{
            onClickLeft(){
                this.$router.push({
                    name:'store',
                    params: {
                        store: this.store,
                        cFoods:this.cFoods
                    }
                });
            },
            onSubmit(){
                this.show = true;
                // console.log(this.cFoods);
                // console.log(this.store);
                this.$axios.post('/submitOrder',{
                    storeId: this.store.id,
                    buyerId: this.$store.state.buyerId,
                    addressId: this.$store.state.address.id,
                    foods:this.cFoods
                }).then(res=>{
                    console.log(res.data);
                    if(res.data.code == 200){
                        // this.$router.replace('/list')
                    }
                })
            },
            onAddress(){
                this.$router.push('/address')
            },
            confirm(){
                this.$store.state.cFoods = [];
                this.$router.replace('/list')
            }
        },
        mounted() {
            console.log("==>OrderSubmit");
            this.store = this.$store.state.store;
            this.cFoods = this.$store.state.cFoods;
            this.address = this.$store.state.address;
        },
        // beforeRouteEnter(to,from,next){
        //     // console.log(to.params.cFoods);
        //     // console.log(from.path);
        //     // this.cFoods = to.params.cFoods;
        //     next(vm=>{
        //         vm.store = to.params.store;
        //         vm.cFoods = to.params.cFoods;
        //     });
        // },
    }
</script>

<style scoped>

</style>